<template>
  <div class="login">
    <header>
      <h3>宏烨经纪人</h3>
      <van-icon name="ellipsis" />
    </header>
    <main>
      <div class="imgs">
        <img src="../../assets/login.jpg" alt="" />
      </div>
      <div class="denglu">
       <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 0.1rem">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          color="linear-gradient(to right, #39becd, #3fc28c)"
        >
          登录
        </van-button>
      </div>
     
    </van-form>
      </div>
    </main>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from "vue";
import { Form, Field, CellGroup, Button, Notify } from "vant";
import { apiToLogin } from "../../api/login";
import { useRouter } from "vue-router";
export default {
  name: "Login",
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Notify.name]: Notify,
  },
  setup() {
    const router = useRouter();
    const data = reactive({
      username: "admin",
      password: "admin",
    });
    onBeforeMount(() => {});
    onMounted(() => {});
    const refData = toRefs(data);
    //登录
    const onSubmit = async (values) => {
      console.log("submit", values);
      const res = await apiToLogin(values);
      console.log(res, "登录");

      if (res.status === 200) {
        Notify({ type: "success", message: res.description });
        router.push("/home");
        localStorage.setItem("HK-user", res.body.token);
      } else {
        Notify({ type: "warning", message: res.description });
      }
    };
    return {
      ...refData,
      onSubmit,
    };
  },
};
</script>

<style>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 50px;
 display: flex;
 justify-content: space-between;
 padding: 0 20px;
 align-items: center;
  background: #409eff;
  color: #fff;
  font-size: 15px;
}
.van-badge__wrapper {
  font-size: 20px;
}
main {
  flex: 1;
  overflow: scroll;
}
img {
  width: 100%;
  height: 500px;
}
</style>